import { DrawType } from '@/utils/json2image.js';

export const getInviteCollageJson = (dataInfo, json2image) => {
  let jsonData = [];
  if (!dataInfo) {
    return jsonData;
  }
  const width = json2image.width;
  const height = json2image.height;
  // 背景图
  let bgItem = {
    type: DrawType.IMAGE,
    url: dataInfo.bgImgUrl,
    left: 0,
    top: 0,
    width: width,
    height: height,
    radius: 20,
  };
  jsonData.push(bgItem);

  // 白色背景色
  let whiteBgItem = {
    type: DrawType.RECT,
    color:'#fff',
    left: 28,
    top: 249,
    width: 694,
    height: 956,
    radius: 36,
  };
  jsonData.push(whiteBgItem);

  // 头像
  let avatarItem = {
    type: DrawType.IMAGE,
    url: dataInfo.headimgurl,
    left: 75,
    top: 295,
    width: 47,
    height: 47,
    radius: '50%'
  };
  jsonData.push(avatarItem);

  // 昵称
  const lontContentFontInfo = {
    fontSize: 36,
    weight: 600,
  }
  let nickWidth = json2image.getTextWidth(dataInfo.nickname, lontContentFontInfo);
  let nameTextItem = {
    ...lontContentFontInfo,
    type: DrawType.TEXT,
    content: dataInfo.nickname,
    textAlign: 'left',
    verticalAlign: 'middle',
    height: 38,
    maxWidth: 300,
    maxLine: 1,
    eplision: true,
    color: '#333',
    left: 134,
    top: 300,
  };
  jsonData.push(nameTextItem);

  // 如果是团长，显示标记
  if (dataInfo.isCaptain == 1) {
    let widthLeft = Number(nickWidth) > 300 ? 460 : Number(nickWidth) + 160;
    let groupLogoBgItem = {
      type: DrawType.RECT,
      color: '#FA3312',
      left: widthLeft,
      top: 298,
      width: 75,
      height: 38,
      radius: 21,
    }
    jsonData.push(groupLogoBgItem);

    let groupLogoItem = {
      type: DrawType.TEXT_BOX,
      content: '团长',
      fontSize: 22,
      color:'#fff',
      maxWidth: 75,
      lineHeight: 36,
      verticalAlign: 'middle',
      textAlign: 'center',
      height: 38,
      left: widthLeft,
      top: 298,
    }
    jsonData.push(groupLogoItem);
  }

  // 封面
  let coverItem = {
    type: DrawType.IMAGE,
    url: dataInfo.cover,
    left: 75,
    top: 380,
    width: 600,
    height: 398,
    radius: 22,
    objectFit: 'cover',
  }
  jsonData.push(coverItem);


  // 拼团logo
  let logoItem = {
    type: DrawType.IMAGE,
    url: dataInfo.logoUrl,
    left: 75,
    top: 380,
    width: 210,
    height: 58,
    radius:  {
      tl: 0,
      tr: 0,
      bl: 0,
      br: 24
    },
    objectFit: 'cover',
  }
  jsonData.push(logoItem);

  let titleTextItem = {
    type: DrawType.TEXT,
    content: dataInfo.title,
    fontSize: 36,
    weight: 600,
    textAlign: 'left',
    color: '#333',
    left: 75,
    top: 801,
    maxWidth: 600,
    maxLine: 1,
    eplision: true,
  };
  jsonData.push(titleTextItem);

  // prodType 类型
  const prodNameFontInfo = {
    fontSize: 24,
  }
  let prodNameWidth = json2image.getTextWidth(dataInfo.prodTypeName, prodNameFontInfo);

  let prodNameBgItem = {
    type: DrawType.RECT,
    color: 'rgba(0,0,0,0.5)',
    left: 663 - prodNameWidth - 30, // 左间距600 +2个字的情况下是63， left等于663- 字体的宽度 + 20 (左右间距)
    top: 728,
    width: prodNameWidth + 20,
    height: 38,
    radius: 10,
  }
  jsonData.push(prodNameBgItem);

  let prodNameItem = {
    ...prodNameFontInfo,
    type: DrawType.TEXT_BOX,
    content: dataInfo.prodTypeName,
    maxWidth: prodNameWidth + 20,
    lineHeight: 38,
    textAlign: 'center',
    color: '#fff',
    left: 663 - prodNameWidth - 30,
    top: 728,
    verticalAlign:'middle',
    height: 40,
  }
  jsonData.push(prodNameItem);

  // let prodItem = {
  //   type: DrawType.TEXT,
  //   content: dataInfo.prodTypeName,
  //   maxWidth: prodNameWidth,
  //   fontSize: 24,
  //   lineHeight: 38,
  //   textAlign: 'left',
  //   color: '#fff',
  //   left: 663 - prodNameWidth - 20,
  //   top: 735,
  // }
  // jsonData.push(prodItem);

  // 活动具体信息
  let text1Item = {
    type: DrawType.TEXT,
    content: '离拼团结束还有',
    fontSize: 30,
    textAlign: 'left',
    color: '#999',
    left: 75,
    top: 867,
  };
  jsonData.push(text1Item);


  let text2Item = {
    type: DrawType.TEXT,
    content: dataInfo.lastTime, //'XX小时XX分钟XX秒',
    fontSize: 32,
    textAlign: 'left',
    weight: 700,
    color: '#FF4A35',
    left: 75,
    top: 926,
  };
  jsonData.push(text2Item);


  let text3Item = {
    type: DrawType.TEXT,
    content: '原价:￥' + dataInfo.prodPrice,
    fontSize: 24,
    color: '#999',
    left: 75,
    top: 984,
    textDecoration: 'line-through'
  };
  jsonData.push(text3Item);

  // 拼团价格
  let priceNameItem = {
    type: DrawType.TEXT,
    content: '拼团价 ¥',
    fontSize: 24,
    textAlign: 'left',
    weight: 400,
    color: '#FF4A35',
    left: 75,
    top: 1118,
  };
  jsonData.push(priceNameItem);


  let prictSize = dataInfo.playersPrice.length <= 7 ? 70 : 60
  let collagePriceItem = {
    type: DrawType.TEXT,
    content: dataInfo.playersPrice,
    fontSize: prictSize,
    textAlign: 'left',
    weight: 400,
    color: '#FF4A35',
    left: 176,
    top: 1084,
  };
  jsonData.push(collagePriceItem);

   // 二维码边框有一条线
   let qrCodeBoxItem = {
    type: DrawType.RECT,
    color: '#f2f2f2',
    top: 970,
    left: 487,
    width: 188,
    height: 188,
    fillType: 'stroke',
    linewidth: 1,
    radius: 5,
  }
  jsonData.push(qrCodeBoxItem);

  // 二维码
  let qrCodeItem = {
    type: DrawType.IMAGE,
    url: dataInfo.qrCodeUrl,
    left: 498,
    top: 981,
    width: 166,
    height: 166,
    objectFit: 'cover',
  }
  jsonData.push(qrCodeItem);

  // 成团人数
  let groupNum = dataInfo.clustering + '人团';
  const groupNumFont = `24px "PingFang SC, Microsoft YaHei, Arial Regular"`;
  let groupNumWidth = json2image.getTextWidth(groupNum, groupNumFont);

  let groupNumBgItem = {
    type: DrawType.RECT,
    color: '#FF4A35',
    left: 140 - groupNumWidth - 30, // 价格的宽度
    top: 1060,
    width: groupNumWidth + 60,
    height: 40,
    radius: {
      tl: 22,
      tr: 22,
      bl: 22,
      br: 5,
    },
  }
  jsonData.push(groupNumBgItem);


  let groupNumItem = {
    type: DrawType.TEXT_BOX,
    content: groupNum,
    fontSize: 24,
    color:'#fff',
    weight: 600,
    maxWidth: groupNumWidth + 60,
    lineHeight: 40,
    verticalAlign: 'middle',
    textAlign: 'center',
    height: 40,
    left: 140 - groupNumWidth - 30, // 价格的宽度
    top: 1061,
  }
  jsonData.push(groupNumItem);

  // 自定义商家名称--直接取店铺配置
  let showItem = {
    type: DrawType.TEXT_BOX,
    content: dataInfo.instruction, //'创客匠人技术支持',
    maxWidth: width,
    fontSize: 30,
    lineHeight: 32,
    height: 32,
    textAlign: 'center',
    verticalAlign: 'middle',
    weight: 400,
    color: '#FFF',
    left: 0,
    top: 1254,
  };
  jsonData.push(showItem);

  return jsonData;
}